<template>
  <van-popup v-model:show="show" teleport="body" :closeable="false" class="van-popup--center" position="right"
    :style="{ 'min-width': '320px', 'borderRadius': '20px' }">
    <div class="content_wrap">
      <div class="receiptCode background_box" id="userCode">
        <template v-if="shopInfo.nickname||shopInfo.owner">
          <div class="title_name">{{ shopInfo.nickname }}</div>
          <div class="image_list">
            <van-image class="shop_img" round fit="cover" v-if="shopInfo.url" :src="shopInfo.url" />
          </div>
          <div class="code_box">
            <div class="HotShop">{{ shopInfo.nickname }}</div>
            <div class="connect-info">{{ splitAddress(shopInfo.owner,9)  }}</div>
            <div class="connect-info">
              <p>{{ shopInfo.describe }}</p>
            </div>
            <div class="code_item">
              <div class="code_class" v-copy="shopCode">
                <vue-qr :logoSrc="requireImg('V.png')" :text="shopCode" :size="200"></vue-qr>
              </div>

            </div>
            <div class="code_describe" v-copy="shopCode"> 
              {{ t("copyUrl") }}
              {{ t('shareForYour') }}
            </div>
          </div>
        </template>
      </div>
      <div @click="createImg" class="save_icon"> <i class="iconfont icon-xiazai"></i> {{ t('save') }}</div>
      <div @click="closeDialog" class="close_icon"> <i class="iconfont icon-guanbi"></i> </div>
    </div>
  </van-popup>
</template>

<script setup>
import AESUtils from '@/utils/AES.js'
import { useStore } from "vuex";
// import QrcodeVue from 'qrcode.vue'
import vueQr from 'vue-qr/src/packages/vue-qr.vue'
import { ref, onMounted, computed } from "vue";
import { useI18n } from "vue-i18n";
import { ethers } from "ethers";
import { splitAddress } from "@/utils/index.js";
import { autoPicture } from '@/utils/index.js'
const emit = defineEmits(["change", "update:modelValue"]);
const requireImg = (imgPath) => {
  return new URL(`../assets/images/${imgPath}`, import.meta.url).href;
};
const props = defineProps({
  shopInfo: {
    type: Object,
    default() {
      return {};
    },
  },
  modelValue: {
    type: Boolean,
    default: false,
  },
});
const show = computed({
  get() {
    return props.modelValue;
  },
  set(value) {
    emit("update:modelValue", value);
  },
});
const closeDialog = () => {
  show.value = false
}
const { locale, t } = useI18n();
const store = useStore();
const shopCode = computed(() => {
  return window.location.origin + `/#/userOrder?owner=${props.shopInfo.owner}`
})
import { useRouter } from "vue-router";
const router = useRouter();
const createImg = async () => {
  const el = document.getElementById(`userCode`)
  const width = el.offsetWidth
  const height = el.offsetHeight
  await autoPicture(`userCode`, { width, height })
  show.value = false
}
onMounted(() => {
})
</script>

<style lang="scss" scoped>
.code_box {
  width: 100%;
  padding: 10px;
  box-sizing: border-box;

  .goodPrice {
    font-size: 14px;
    color: $money;
    display: flex;
    flex-direction: column;
    align-items: center;

    .usdt_class {
      font-size: 10px;
      color: #888;
    }

 
  }
   .connect-info {
      color: #888;
      text-align: center;
    }
  .HotShop {
    font-size: 12px;
    font-weight: bold;
    text-align: center;
  }
}

:deep .van-popup--center {
  top: 50%;
  left: 50%;
  transform: translate3d(-50%, -50%, 0);
  max-width: calc(100vw - var(--van-padding-md) * 2) !important;
}

.st10 {
  fill: #fff;
}

.m_box {
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  margin-top: 10px;

  .m_item {
    width: 20%;
    display: flex;
    justify-content: center;
    align-items: center;
    flex-direction: column;

    img {
      height: 30px;
      margin-top: 5px;
    }

    span {
      transform: scale(0.7);
    }
  }
}

.content_wrap {
  max-height: 100vh;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  align-items: center;
  position: relative;

  .save_icon {
    position: absolute;
    height: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 15px;
    color: #ffffff;
    display: flex;
    align-items: center;
    padding: 0 4px;
    justify-content: center;
    top: 10px;
    left: 10px;
  }

  .close_icon {
    position: absolute;
    height: 20px;
    width: 20px;
    background: rgba(0, 0, 0, 0.4);
    border-radius: 50%;
    color: #ffffff;
    display: flex;
    align-items: center;
    justify-content: center;
    top: 10px;
    right: 10px;
  }


  .van-button--primary {
    border: none;
    font-weight: 400;
  }

  .van-button {
    margin-top: 1.06667rem;
    width: 100%;
    height: 1.06667rem;
    font-weight: 500;
    font-size: 12px;
    border-radius: 0.53333rem;
  }


  .receiptCode {
    position: relative;
    display: flex;
    align-items: center;
    width: 100%;
    flex-direction: column;

    .title_name {
      display: flex;
      padding: 6px 7px;
      align-items: center;
      justify-content: center;
      font-size: 12px;
      font-weight: bold;
      padding: 3px 0.15625rem;
      margin: 0.3125rem 0 0.3125rem 0;
      color: $primary-color;
      border-radius: 0.15625rem;
      border: 1px solid $primary-color;
    }

    .image_list {
      display: flex;
      align-items: center;
      justify-content: center;
      padding: 30px 20px 20px 20px;


      .van-image {
        width: 100%;
        height: 100%;

        // border-radius: 100%;
        :deep .van-image__img {
          max-height: 300px;
        }
      }
      .shop_img{
        height: 60px;
        width: 60px;
        border-radius: 50%;
        align-items: center;
        background: #4653c8;
        display: flex;
        justify-content: center;
      }
    }

    .code_item {
      display: flex;
      margin-top: 8px;
      align-items: center;
      justify-content: center;

      .code_class {
        background: #fff;
        padding: 5px;
        border-radius: 4px;
      }


    }

    .code_describe {
      text-align: center;
      margin-top: 3px;
      padding: 10px;
      color: #bdbdbd;
    }


  }

  .content-box {
    font-size: .34667rem;
    line-height: 16px;
    margin-top: 8px;
    font-weight: 700;
    text-align: center;
    font-family: Alibaba-PuHuiTi;

    .name {
      color: $primary-color;
      font-size: 14px;
    }

    .address {
      color: #888;
      font-size: 10px;
    }
  }

  .address {
    margin-top: 0.08rem;
    font-family: DINPro-Regular;
    font-weight: 300;
  }
}
</style>
